<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<ui:composition template="/template/common.xhtml">
	
		<ui:define name="pageTitle">
			<h:outputText value="Product Search" />
		</ui:define>
	
		<ui:define name="content">
    	<f:event listener="#{productDetailBean.initProduct}" type="preRenderView" />
    	
	   		<h:form id="mainForm">     	
		    	<p:growl id="mainGrowl" sticky="true"  />
		    	<p:panelGrid style="width:1024px">  
				    <f:facet name="header">
				    	<p:row>  
		            		<p:column colspan="2">  
				        		Product Details
				        	</p:column>
				        </p:row>
				    </f:facet>  
				  	<p:row> 
				  		<p:column>
				    		<h:outputLabel for="sku" value="sku: *" />
				    	</p:column>
				    	<p:column>  
				    		<p:inputText id="sku" required="true" value="#{productDetailBean.product.sku}" label="Sku"  rendered="#{productDetailBean.newProduct}"/>
				    		<h:outputText  value="#{productDetailBean.product.sku}" label="Sku" rendered="#{not productDetailBean.newProduct}"/>
				    	</p:column>  
				  	</p:row>
				  	<p:row> 
				  		<p:column>
				    		<h:outputLabel for="type" value="Type *" />
				    	</p:column>
				    	<p:column>  
				    		<p:selectOneMenu id="type" required="true"  label="Type"  valueChangeListener="#{productDetailBean.clearDetails}" value="#{productDetailBean.product.type}"  >  
					            <f:selectItem itemLabel="Select One" itemValue="" />  
					            <f:selectItem itemLabel="Audio Album" itemValue="Audio Album" />  
					            <f:selectItem itemLabel="Book" itemValue="Book" /> 
					            <f:ajax  render="buttonPanel trackPanel chapterPanel"/>
					        </p:selectOneMenu>
				    	</p:column>  
				  	</p:row> 
				  	<p:row> 
				  		<p:column>
				    		<h:outputLabel for="title" value="Title: *" />
				    	</p:column>
				    	<p:column>  
				    		<p:inputText id="title" required="true" value="#{productDetailBean.product.title}" label="Title" />
				    	</p:column>  
				  	</p:row> 
				  	<p:row> 
				  		<p:column>
				    		<h:outputLabel for="description" value="Description: *" />
				    	</p:column>
				    	<p:column>  
				    		<p:inputText id="description" required="true" value="#{productDetailBean.product.description}" label="Description" />
				    	</p:column>  
				  	</p:row> 
				  	<p:row> 
				  		<p:column>
				    		<h:outputLabel for="publisher" value="Publisher: *" />
				    	</p:column>
				    	<p:column>  
				    		<p:inputText id="publisher" required="true" value="#{productDetailBean.product.publisher}" label="Publisher" />
				    	</p:column>  
				  	</p:row> 
		    		
		    		<p:row> 
				  		<p:column>
				    		<h:outputLabel for="artist" value="Artist: " />
				    	</p:column>
				    	<p:column>  
				    		<p:inputText id="artist"  value="#{productDetailBean.product.details.artist}" label="Artist" />
				    	</p:column>  
				  	</p:row>  
	
		    		<p:row> 
				  		<p:column>
				    		<h:outputLabel for="listPrice" value="List Price: " />
				    	</p:column>
				    	<p:column>  
				    		<p:inputText id="listPrice"  required="true" value="#{productDetailBean.product.pricing.list}" label="List Price" />
				    	</p:column>  
				  	</p:row>  
		
			    		<p:row> 
				  		<p:column>
				    		<h:outputLabel for="retailPrice" value="Retail Price: " />
				    	</p:column>
				    	<p:column>  
				    		<p:inputText id="retailPrice"  required="true" value="#{productDetailBean.product.pricing.retail}" label="REtail Price" />
				    	</p:column>  
				  	</p:row>  
		
			    	<p:row> 
				  		<p:column>
				    		<h:outputLabel for="author" value="Author: " />
				    	</p:column>
				    	<p:column>  
				    		<p:inputText id="author"  value="#{productDetailBean.product.details.author}" label="Author" />
				    	</p:column>  
				  	</p:row> 
		
		    		<p:row> 
				  		<p:column>
				    		<h:outputLabel for="genre" value="Genre: *" />
				    	</p:column>
				    	<p:column>  
				    		<p:inputText id="genre" required="true" value="#{productDetailBean.product.details.genre}" label="Genre" />
				    	</p:column>  
				  	</p:row> 
	
				 	<p:row>  
			        	<p:column colspan="2" styleClass="ui-widget-header">  
			        		<p:outputPanel id="buttonPanel">		        		
			            		<p:commandButton value="Add Tracks"   onclick="addTrackDlg.show();" type="button" rendered="#{productDetailBean.product.type == 'Audio Album'}"/>		            	
			            		<p:commandButton value="Add Chapters"   onclick="addChapterDlg.show();" type="button" rendered="#{productDetailBean.product.type == 'Book'}"/>
			            	</p:outputPanel>
			        	</p:column>  
		    		</p:row>
	
		    		<p:row>  
			        	<p:column colspan="2" > 
			        		<p:outputPanel id="trackPanel" >
				            	<p:dataList value="#{productDetailBean.product.details.tracks}" var="track" type="ordered" rendered="#{productDetailBean.product.details.tracks.size() > 0}">  
								    #{track} 
								</p:dataList> 
							</p:outputPanel>
							<p:outputPanel id="chapterPanel" >
								<p:dataList value="#{productDetailBean.product.details.chapters}" var="chapter" type="ordered" rendered="#{productDetailBean.product.details.chapters.size() > 0}">  
								    #{chapter} 
								</p:dataList> 
							</p:outputPanel> 
							
			        	</p:column>  
		    		</p:row> 
		
				    <f:facet name="footer"> 
				    	<p:row>
				    		<p:column colspan="2">	 
				    			<p:commandButton value="Save" icon="ui-icon-disk"  actionListener="#{productDetailBean.doSave}" update="mainGrowl" />
				    			<p:button value="Back to Search" icon="ui-icon-back"  outcome="search.xhtml" />
				    		</p:column>
				    	</p:row>			    	  
				    </f:facet>  
				</p:panelGrid> 		
			
			</h:form>
			
			
			<h:form>			
				<p:growl id="trackGrowl" sticky="true"  />
				<p:dialog id="addTrackDlg" header="Adding Tracks for the product" widgetVar="addTrackDlg" modal="true" height="100" width="450" resizable="false">  
	    			<h:outputLabel for="track" value="Track: " />	
	    			<p:inputText id="track" required="true" value="#{productDetailBean.newTrack}" label="Track" /> 
	    			<p:commandButton value="Add" actionListener="#{productDetailBean.doAddTracks}" icon="ui-icon-check"  update="trackGrowl, :mainForm:trackPanel" oncomplete="addTrackDlg.hide()"/>
				</p:dialog> 
			</h:form>	
			
			
			<h:form>
				<p:growl id="chapterGrowl" sticky="true"  />	
				<p:dialog id="addChapterDlg" header="Adding Chapters for the product" widgetVar="addChapterDlg" modal="true" height="100" width="450" resizable="false">  
	    			<h:outputLabel for="chapter" value="Chapter: " />	
	    			<p:inputText id="chapter" required="true" value="#{productDetailBean.newChapter}" label="Chapter" /> 
	    			<p:commandButton value="Add" actionListener="#{productDetailBean.doAddChapters}" icon="ui-icon-check"  update="chapterGrowl, :mainForm:chapterPanel" oncomplete="addChapterDlg.hide()"/>
	    			
				</p:dialog> 
			</h:form>	
		</ui:define>
	</ui:composition>
</html>		